// 1. 获取学生数据 并渲染到表格
async function renderStudent() {
    const { data: res } = await axios.get('/students')
    // console.log(res);
    let arr = res.data.map(item => {
        return `<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
            <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
            <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
        </tr>`
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()

// 添加操作 需要提前准备 比如模态框的用法 省市县联动效果
// bootstarap 模态框使用方法 两个步骤 1. 实例化 2. 调用方法显示或隐藏

let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 模态框显示
// addModal.hide() // 模态框隐藏

// 点 + 按钮的时候 让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    // 修改标题
    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('#form').reset()

    addModal.show() // 模态框显示
})

// 下面的函数完成省市县的联动效果
async function initCity() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')

    // 1. 马上获取到全部的省 渲染到第一个下拉框的位置 
    const { data: res } = await axios.get('/api/province')
    // console.log(res);
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = `<option value="">--省份--</option>` + arr.join('')


    // 2. 切换市的时候, 获取对应的市,渲染到第二个下拉框的位置
    province.addEventListener('change', async function () {
        area.innerHTML = `<option value="">--地区--</option>`
        let pname = province.value
        if (pname === '') {
            return (city.innerHTML = `<option value="">--城市--</option>`)
        }
        const { data: res } = await axios.get('/api/city', { params: { pname } })
        // console.log(res);
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = `<option value="">--城市--</option>` + arr.join('')
    })

    // 3. 切换县的时候, 获取对应的县,渲染到第三个下拉框的位置
    city.addEventListener('change', async function () {
        let pname = province.value
        let cname = city.value
        if (cname === '') {
            return (area.innerHTML = `<option value="">--地区--</option>`)
        }
        const { data: res } = await axios.get('/api/area', { params: { pname, cname } })
        // console.log(res);
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = `<option value="">--地区--</option>` + arr.join('')
    })
}
initCity()

// 点击弹窗中 确认 按钮的时候 
document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault()
    let data = val(document.querySelector('#form'))
    // console.log(data);
    // 把数字类型的值转换一下
    data.age = +data.age // + 必须和后面的变量连在一起
    data.gender = Number(data.gender)
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary

    // 判断是添加还是修改
    let title = document.querySelector('#modal h5').innerHTML
    if (title === '添加学员') {
        // ajax提交
        try {
            const { data: res } = await axios.post('/students', data)
            // console.log(res);
            message.success(res.message) // 使用插件提示
            renderStudent() // 重新渲染页面
            addModal.hide() // 关闭弹层
        } catch (e) {
            message.error('添加失败')
        }
    } else if (title === '修改学员') {
        try {
            let id = document.querySelector('#modal h5').dataset.id
            const { data: res } = await axios.put(`/students/${id}`, data)
            // console.log(res);
            message.success(res.message) // 使用插件提示
            renderStudent() // 重新渲染页面
            addModal.hide() // 关闭弹层
        } catch (e) {
            message.error('修改失败')
        }
    }



})

// -----------------------删除操作 | 编辑操作-------------------------
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 判断点击的是不是删除
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        // console.log('点的删除', id);
        // 目前阶段 应该有这样的思想, 对于敏感操作必须加提示
        // 至于用什么提示 (都行 原生confirm . 插件)

        // 原生的
        if (!confirm('确定删除吗')) return

        try {
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent() // 重新渲染
        } catch (e) {
            message.error('删除失败哦')
        }
    }

    // 判断点击的是不是编辑
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // console.log('点的编辑', id);

        // 修改模态框的标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        document.querySelector('#modal h5').setAttribute('data-id', id)
        addModal.show();
        // 做数据回填 --> 首先要有数据 --> 根据 id 发送请求获取数据
        const { data: res } = await axios.get(`/students/${id}`)
        // console.log(res);
        // 在数据回填之前,应该把市,县 都取出, 渲染到第2.3个下拉框中
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        // const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
        // console.log(c);
        // console.log(a);
        const result = await Promise.all([p1, p2])

        console.log(result[0].data.data);
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>` + arr2.join('')

        console.log(result[1].data.data);
        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        // val(表单,数据) // 传两个参数,表示进行数据回填
        val(document.querySelector('#form'), res.data)
    }
})
